<template>
  <div class="rank" :class="'rank--' + data.rank" ref="rank">
    <div class="rank__head">
      <div class="rank__head-ranks" v-show="data.rankAction != false">
        <span class="rank__head-rank rank__head-rank--asc" @click="handleRank('asc')">正序</span>
        <span class="rank__head-rank rank__head-rank--desc" @click="handleRank('desc')">倒序</span>
      </div>
      <div class="rank__head-unit">单位：{{data.unit}}</div>
    </div>
    <div class="rank__list">
      <div class="rank__item" v-for="(item, index) in data.data" :key="index">
        <div class="rank__title" :style="{width: titleWidth}">
          <span class="rank__num">
            <slot v-if="data.rank == 'asc'">{{index + 1}}</slot>
            <slot v-if="data.rank == 'desc'">{{data.data.length - index}}</slot>
          </span>
          {{item.name}}
        </div>
        <div class="rank__inner">
          <van-progress
            :percentage="data.type == 'percentage' ? parseFloat(item.value) : item.percentage"
            stroke-width="8"
            color="linear-gradient(to right, #FF3837, #FF9090)"
            :show-pivot="false"
            track-color="#F9F8F7"
          ></van-progress>
        </div>
        <div class="rank__total" :style="{width: totalWidth}">{{numFormat(item.value)}}</div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
    name: 'RankList',
    props: ['data'],
	  data() {
      return {
        titleWidth: '',
        totalWidth: '',
      }
    },
    created() {
      this.handleData()
    },
    watch: {
      'data.data': function(val) {
        this.handleData()
      },
      deep: true
    },
    methods: {
      //数据处理
      handleData () {
        let values = this.data.data.map(item => {
          return item.value
        })
        let numStrs = this.data.data.map(item => {
          item.value = item.value + ''
          return item.value.length
        })
        let titleStrs = this.data.data.map(item => {
          return item.name.length
        })
  
        let maxValue = Math.max.apply('', values) + 10
        this.totalWidth = Math.max.apply('', numStrs) * 9 + 'px'
        this.titleWidth = (Math.max.apply('', titleStrs) + 1) * 14 + 'px'
        
        this.data.data.forEach(item => {
          Object.assign(item, {percentage: item.value / maxValue * 100})
        })
      },
      handleRank(item) {
        if (this.data.rank != item) {
          this.data.rank = item
          this.data.data = this.data.data.reverse()
        }
      },
      //数字初始化
      numFormat(num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .rank {
    padding: 0 12px;
    
    &__item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    
    &--asc {
      .rank__item {
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          .rank__num {
            width: 16px;
            height: 20px;
            background-size: 100% 100%;
            border-radius: 0;
            box-sizing: border-box;
            padding-top: 4px;
            color: #fff
          }
        }
        
        &:nth-child(1) {
          .rank__num {
            background-image: url(~@/assets/images/icon-prize1.png);
          }
        }
        
        &:nth-child(2) {
          .rank__num {
            background-image: url(~@/assets/images/icon-prize2.png);
          }
        }
        
        &:nth-child(3) {
          .rank__num {
            background-image: url(~@/assets/images/icon-prize3.png);
          }
        }
      }
      
      .rank__head-rank--asc {
        color: #ff4b47;
        
        &::before {
          background-image: url(~@/assets/images/target/icon-asc-on.png);
        }
      }
    }
    
    &--desc {
      .rank__item {
        &:nth-last-child(1),
        &:nth-last-child(2),
        &:nth-last-child(3) {
          .rank__num {
            width: 16px;
            height: 20px;
            background-size: 100% 100%;
            border-radius: 0;
            box-sizing: border-box;
            padding-top: 4px;
            color: #fff
          }
        }
        
        &:nth-last-child(1) {
          .rank__num {
            background-image: url(~@/assets/images/icon-prize1.png);
          }
        }
        
        &:nth-last-child(2) {
          .rank__num {
            background-image: url(~@/assets/images/icon-prize2.png);
          }
        }
        
        &:nth-last-child(3) {
          .rank__num {
            background-image: url(~@/assets/images/icon-prize3.png);
          }
        }
      }
      
      .rank__head-rank--desc {
        color: #ff4b47;
        
        &::before {
          background-image: url(~@/assets/images/target/icon-desc-on.png);
        }
      }
    }
    
    &__inner {
      flex: 1;
    }
    
    &__title,
    &__total {
      flex: none;
    }
    
    &__total {
      text-align: right;
      color: #848484;
    }
    
    &__title {
      padding-left: 26px;
      position: relative;
    }
    
    &__num {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #E7E7E7;
      line-height: 16px;
      text-align: center;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    
    &__head {
      color: #999999;
      margin-bottom: 16px;
      overflow: hidden;
      
      &-ranks {
        float: left;
      }
      
      &-unit {
        float: right;
      }
      
      &-rank {
        padding-right: 10px;
        
        &::before {
          content: "";
          display: inline-block;
          width: 1.5em;
          height: 1.5em;
          vertical-align: top;
          background-size: 100% 100%;
          margin-right: 6px;
        }
        
        &--asc {
          &::before {
            background-image: url(~@/assets/images/target/icon-asc-off.png);
          }
        }
        
        &--desc {
          &::before {
            background-image: url(~@/assets/images/target/icon-desc-off.png);
          }
        }
      }
    }
  }
</style>
